<div class="card">
  <div class="top">
    <p class="title">script.py</p>
    <span class="buttons">
    <button class="minimize">
			<svg viewBox="0 0 10.2 1" y="0px" x="0px"><rect height="1" width="10.2" y="50%" x="0"></rect></svg>
		</button>
    <button class="maximize">
			<svg viewBox="0 0 10 10"><path d="M0,0v10h10V0H0z M9,9H1V1h8V9z"></path></svg>
		</button>
    <button class="close">
			<svg viewBox="0 0 10 10"><polygon points="10.2,0.7 9.5,0 5.1,4.4 0.7,0 0,0.7 4.4,5.1 0,9.5 0.7,10.2 5.1,5.8 9.5,10.2 10.2,9.5 5.8,5.1"></polygon></svg>
		</button>
    </span>

  </div>
  <div class="topfix">
  </div>
<hr>
  <div class="content">
    <p>
      <code>
        <i class="c1">import</i> os, sys<br>
        <b class="c2">os</b>.system<b class="c3">(</b><b class="c4">"title test script"</b><b class="c3">)</b><br>
        <b class="c2">print</b><b class="c3">(</b><b class="c4">"Hello UIVERSE.io!"</b><b class="c3">)</b><br>
        <b class="c2">sys</b>.exit<b class="c3">(</b><b class="c3">)</b><br>
        <i class="comment">#this is a comment.</i>
      </code>
    </p>
  </div>
</div>
<style>
/* From Uiverse.io by reshades - Tags: card, editor, code, vscode */
.card {
  width: 250px;
  height: 254px;
  background: #121212;
  border-radius: 10px;
  border: 1px #212121 solid;
}

.card hr {
  color: #313131;
  margin-top: -3.5px
}

.content {
  color: #8e8e8e;
  margin-left: 0.3em;
}

.c1 {
  color: rgb(55, 91, 158)
}

.c2 {
  color: rgb(55, 158, 150)
}

.c3 {
  color: rgb(158, 151, 55)
}

.c4 {
  color: rgb(88, 158, 55)
}

.comment {
  opacity: 50%
}

.title {
  color: #e8e8e8;
  font-size: small;
  float: left;
  margin-left: 0.6em;
  margin-top: 0.6em;
}

.top {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 21px;
  font-weight: 450;
  background-color: #121212;
  width: 100%;
  text-align: right;
  border-radius: 10px
}

.topfix {
  background-color: #121212;
  width: 100%;
  height: 1em;
  margin-top: -1em;
}

button {
  width: 40px;
  height: 35px;
  margin-left: -5px;
  border: 0;
  outline: 0;
  background: transparent;
  transition: 0.2s;
}

button svg path, 
button svg rect, 
button svg polygon {
  fill: #ffffff;
}

button svg {
  width: 10px;
  height: 10px;
}

.close:hover {
  background-color: #ffffff10;
}

.maximize:hover {
  background-color: #ffffff10;
}

.minimize:hover {
  background-color: #ffffff10;
}
</style>
